<style scoped>
.list_row{background: #fff;margin-bottom: 2px;padding: 5px 10px;}
.list_row{align-items: stretch;}
.list_row>.img{width: 100px;height: auto;}
.list_row>.content{flex-direction: column;align-items: stretch;padding: 1px 4px 1px 8px;}
.list_row .money{color: #ff9200;font-weight: bold;}

.menu{margin-top: 10px;}
</style>
<template>
  <HeaderSlot>
    <van-nav-bar :title="$t('线下支付记录')" left-arrow @click-left="href_handle(-1)" />
  </HeaderSlot>
  <RequestListSlot url="/home/offline_pay/list?order[create_time]=desc" :data="post_data" group_key="month" pull_refresh :list_handle="list_handle" :refresh_before="refresh_before">
    <template #group="{group_value, row_start}">
      <h2 @click="select_month(row_start)">{{group_value}}<van-icon name="arrow-down" /></h2>
    </template>
    <template #default="{row}">
      <div class="list_row flex">
        <img-referrer class="img" :src="row.pay_verify_file" @click="show_img(row.pay_verify_file)" draggable="false"/>
        <div class="content max flex">
          <div>单号：{{row.pay_no}}</div>
          <div>备注：{{row.note_user}}</div>
          <div v-if="[2,3].includes(row.status)">审核备注：{{row.note_admin}}</div>
          <p class="max"></p>
          <div class="flex" style="justify-content: space-between;">
            <p class="money">{{row.pay_money}}</p>
            <van-tag :type="['default','default','primary','danger'][row.status] || 'default'">{{row.status_label}}</van-tag>
          </div>
        </div>
      </div>
    </template>
  </RequestListSlot>
</template>

<script>
import {_url_static} from "@/js/s94_tool.js";
import HeaderSlot from "@/components/slot/HeaderSlot.vue";
import {href_handle} from "@/vue_plugin/router_auto.js";
import tool from "@/js/tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";
import RequestListSlot from "@/components/slot/RequestListSlot.vue";

export default {
  components: {RequestListSlot, ImgReferrer, HeaderSlot},
  data(){
    return {
      post_data: '',
    }
  },
  methods:{
    href_handle,
    list_handle(list){
      list.forEach(row=>{
        row.month = row.create_time.substring(0, 7).replace('-','年')+'月';
        row.status_label = ['默认','待审核','支付成功','支付失败'][row.status];
        row.pay_verify_file = _url_static(row.pay_verify_file);
      })
      return list;
    },
    select_month(row){
      let y_m = row.create_time.substring(0, 7);
      tool.select_date('Y-M', y_m).then(value => {
        let max_day = value+'-31';
        this.post_data = `where[create_time][elt]=${max_day}`;
      })
    },
    refresh_before(){
      if (this.post_data){
        this.post_data = '';
        // return false;
      }
    },
    show_img(img){
      tool.preview_img({url: img});
    },
  },
  computed:{},
  mounted(){

  }
}
</script>